<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link th:href="@{/frontstatic/css/iconfont.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/global.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap-theme.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/swiper.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/styles.css}" rel="stylesheet">
    <script charset="utf-8" th:src="@{/lib/layui-v2.6.3/layui.js}"></script>
    <link media="all" rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}">
    <script charset="utf-8" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/jquery.DJMask.2.1.1.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify_stand.js}"></script>
    <title>个人信息</title>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{head::headdeg}"></div>
<!-- 顶部标题 -->
<div class="bgf5 clearfix">
    <div class="top-user">
        <div class="inner">
            <div class="title">个人中心</div>
        </div>
    </div>
</div>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="pull-left bgf">
            <dl class="user-center__nav">
                <dt>帐户信息</dt>
                <a href="/skippage?url=udai_setting">
                    <dd class="active">个人资料</dd>
                </a>
                <a href="/skippage?url=udai_address">
                    <dd>收货地址</dd>
                </a>
            </dl>
            <dl class="user-center__nav">
                <dt>订单中心</dt>
                <a href="/skippage?url=udai_order">
                    <dd>我的订单</dd>
                </a>
                <a href="/skippage?url=udai_refund">
                    <dd>售后</dd>
                </a>
            </dl>
        </div>
        <div class="pull-right">
            <div class="user-content__box clearfix bgf">
                <div class="title">账户信息-个人资料</div>
                <div class="layui-upload-drag" id="test10" style="border-radius: 10px;width: 130px;height: 120px;position: relative;left: 600px;top: 35px">
                    <i class="layui-icon" id="tilte"></i>
                    <div class="layui-hide" id="uploadDemoView" lay-filter="imgTest">
                        <img  alt="上传成功后渲染" id="imgtest" style="width: 100%;height: 100%;object-fit:cover;">
                    </div>
                </div>
                <div class="layui-form layui-form-pane" lay-filter="example">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" id="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            <input id="imaurl" name="upimg"  style="display: none"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">出生日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="birthday"  id="date1" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" id="man" value="0" title="男">
                            <input type="radio" name="sex" id="grl" value="1" title="女">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">个性签名</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" name="text" id="text" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button style="margin-left: 320px" class="layui-btn layui-btn-primary layui-border-black" id="LAY-component-form-getval">确定</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
</div>
<div>
</div>
<div aria-label="Loading" class="loading" role="img" tabindex="-1"></div>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="udai_welcome.html">
                <i class="iconfont icon-user" data-badge="0"></i>
                <div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="udai_shopcart.html">
                <i class="iconfont icon-cart"></i>
                <div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="udai_collection.html">
                <i class="iconfont icon-aixin"></i>
                <div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="">
                <i class="iconfont icon-liaotian"></i>
                <div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="issues.html">
                <i class="iconfont icon-liuyan"></i>
                <div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
            </a>
        </li>
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
</body>

<script>
    var notify
    layui.use(['notify'],function() {
        notify=layui.notify;
    })
    layui.use(['upload', 'element', 'layer','form', 'layedit', 'laydate'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            , form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        laydate.render({
            elem: '#date1'
        });
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        //拖拽上传
        upload.render({
            elem: '#test10'
            ,url: '/imagefile' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                notify.success('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
                document.getElementById("tilte").style.display= "none";
                $("#imaurl").val(res.data)
            }
        });
        //信息修改
        layui.$('#LAY-component-form-getval').on('click', function(){
            var data = form.val('example');
            var s = JSON.stringify(data);
            $.ajax({
                type : "POST",
                contentType: "application/json",
                data:s,
                dataType: "json",
                url:"/users/update",
                async : true,
                success : function(date){
                    if (date.code==0) {
                        notify.success("更新成功");
                        window.location.reload();
                    }else {
                        notify.error(date.msg);
                    }
                }
            })
        });
        //信息显示
        $.ajax({
            type : "POST",
            dataType: "json",
            url:"/users/getList",
            async : true,
            success : function(ex){
                if (ex.code==0) {
                    var data = ex.data;
                    if (data.sex==0){
                        $("#man").attr("checked",true)
                    }else {
                        $("#grl").attr("checked",true)
                    }
                    $("#name").val(data.name)
                    $("#date1").val(data.birthday)
                    $("#text").val(data.text)
                    $("#imaurl").val(data.upimg)
                    form.render('radio');
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src',data.upimg);
                    document.getElementById("tilte").style.display= "none";
                }else {
                    notify.error(date.msg);
                }
            }
        })


    });
</script>
</html>